<template>
  <div style="height: 100%">
    <Layout style="height: 100%">
      <Header style="background: #fff">
        <Row>
          <Col span="3"
            ><Checkbox v-model="manualWriteOff">手动核销</Checkbox></Col
          >
          <Col span="9">
            房号：
            <Input prefix="ios-search" style="width: auto" />
            <Button type="primary" style="margin-left: 15px" @click="doSearch"
              >查询</Button
            >
          </Col>
          <Col span="3"
            ><div>总数：{{ total }}</div></Col
          >
          <Col span="3"
            ><div>已核销：{{ writeOff }}</div></Col
          >
          <Col span="3"
            ><div>剩余：{{ noWriteOff }}</div></Col
          >
        </Row>
      </Header>
      <Content>
        <Row style="height: 100%">
          <Col span="16" style="height: 100%">
            <Row style="height: 50%">
              <Table
                ref="mainTables"
                highlight-row
                :data="mainData"
                :columns="mainColumns"
                @on-current-change="doMainTableChoose"
                style="height: 100%"
              >
                <template slot-scope="{ row, index }" slot="action">
                  <Label
                    size="small"
                    style="margin-right: 10px"
                    @click="doWriteOff(row)"
                    >核销</Label
                  >
                  <Label size="small" @click="doAdd(index)">追加</Label>
                </template>
              </Table>
            </Row>
            <Row style="height: 50%">
              <Table
                ref="detailTables"
                :data="detailData"
                :columns="detailColumns"
                style="height: 100%"
              >
                <template slot-scope="{ row, index }" slot="action">
                  <Label
                    size="small"
                    style="margin-right: 10px"
                    @click="doWriteOff(row)"
                    >核销</Label
                  >
                  <Label size="small" @click="doAdd(index)">追加</Label>
                </template>
              </Table></Row
            >
          </Col>
          <Col span="8" style="height: 100%">
            <Card style="margin-left: 10px; height: 100%">
              <p slot="title" style="text-align: center">宾客信息</p>
              <div>
                <Row style="margin-bottom: 20px">
                  <Col span="12"> <p>姓名：</p></Col>
                  <Col span="12"> <p>房号：</p></Col>
                </Row>
                <Row style="margin-bottom: 20px">
                  <Col span="12"> <p>客人类型：</p></Col>
                  <Col span="12"> <p>团队/会议：</p></Col>
                </Row>
                <Row style="margin-bottom: 40px">
                  <Col span="12"> <p>会员等级：</p></Col>
                  <Col span="12"> <p>订单来源：</p></Col>
                </Row>
              </div>
              <Row style="margin-bottom: 20px">
                <Col span="12"> <p>姓名：</p></Col>
                <Col span="12"> <p>房号：</p></Col>
              </Row>
              <Row style="margin-bottom: 20px">
                <Col span="12"> <p>客人类型：</p></Col>
                <Col span="12"> <p>团队/会议：</p></Col>
              </Row>
              <Row style="margin-bottom: 40px">
                <Col span="12"> <p>会员等级：</p></Col>
                <Col span="12"> <p>订单来源：</p></Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </Content>
    </Layout>
  </div>
</template>

<script>
import { getTableData } from '@/api/data'
export default {
  name: 'breakfast_page',
  components: {

  },
  data () {
    return {
      mainColumns: [
        { title: '房间号', key: 'name', sortable: true },
        { title: '订单号', key: 'name' },
        { title: '含早数', key: 'name' },
        { title: '已核销', key: 'name' },
        { title: '剩余数', key: 'name' },
        { title: '追加数', key: 'name' },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      mainData: [],
      detailColumns: [
        { title: '房间号', key: 'name', sortable: true },
        { title: '订单号', key: 'name' },
        { title: '含早数', key: 'name' },
        { title: '已核销', key: 'name' },
        { title: '剩余数', key: 'name' },
        { title: '追加数', key: 'name' },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      detailData: [],
      manualWriteOff: false,
      total: 0,
      writeOff: 0,
      noWriteOff: 0
    }
  },
  methods: {
    handleDelete (params) {
      console.log(params)
    },
    doAdd (index) {
      alert(1)
    },
    doWriteOff () {
      alert(1)
    },
    doSearch () {
      alert(1)
    },
    doMainTableChoose (currentRow) {
      getTableData().then(res => {
        this.detailData = res.data
      })
    }
  },
  mounted () {
    getTableData().then(res => {
      this.mainData = res.data
    })
  }
}
</script>

<style>
</style>
